<template>
	<view>
		<view class="blank30"></view>
		<view class="wrapper">
			<u--form :labelStyle="formLabelStyle" labelPosition="top" :model="form" :rules="rules" ref="uForm"
				labelWidth="300">
				<u-form-item label="project name" prop="projectName">
					<u--input :customStyle="inputCustomStyle" placeholder="please enter" v-model="form.projectName"
						border="none" fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Role Played " prop="projectRole">
					<u--input :customStyle="inputCustomStyle" placeholder="please enter" v-model="form.projectRole"
						border="none" fontSize="12px"></u--input>
				</u-form-item>
				<view class="flex justify-between">
					<view style="width: 320upx;">
						<u-form-item label="Start Time" prop="startDate" labelWidth="100">
							<view style="position: relative;width: 100%;">
								<u--input :customStyle="inputCustomStyle" placeholder="please choose"
									:value="form.startDate" border="none" fontSize="12px" disabled
									@click.native="chooseDate('startDate')">
									<view slot="suffix">
										<image class="date-icon" src="/static/images/rl.jpg" mode="aspectFit"></image>
									</view>
								</u--input>
							</view>
						</u-form-item>
					</view>
					<view style="width: 320upx;">
						<u-form-item label="End Time" prop="endDate" labelWidth="100">
							<view style="position: relative;width: 100%;">
								<u--input :customStyle="inputCustomStyle" placeholder="please choose"
									:value="form.endDate" border="none" fontSize="12px" disabled
									@click.native="chooseDate('endDate')">
									<view slot="suffix">
										<image class="date-icon" src="/static/images/rl.jpg" mode="aspectFit"></image>
									</view>
								</u--input>
							</view>
						</u-form-item>
					</view>
				</view>
				<u-form-item label="Project description" prop="descriptionContent">
					<u--textarea v-model="form.descriptionContent" placeholder="Please enter"
						:customStyle="inputCustomStyle" border="none" fontSize="12px" :autoHeight="true"
						class="g_textarea_min_height" count maxlength="300"></u--textarea>
				</u-form-item>
				<u-form-item label="Project performance" prop="achievementsContent">
					<u--textarea v-model="form.achievementsContent" placeholder="Please enter"
						:customStyle="inputCustomStyle" border="none" fontSize="12px" :autoHeight="true"
						class="g_textarea_min_height" count maxlength="300"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view class="blank30"></view>
		<fixed-bottom-btn @submit="submit"></fixed-bottom-btn>

		<u-datetime-picker :closeOnClickOverlay="true" :show="datePickerShow" mode="date" @confirm="onConfirmDatePicker"
			@close="onCloseDatePicker" @cancel="onCancelDatePicker" cancelText="Cancel"
			confirmText="Confirm"></u-datetime-picker>

	</view>
</template>

<script>
	import {
		dicts_by_key,
		project,
		project_sid,
		project_sid_delete,
		project_sid_edit
	} from '@/common/api.js';
	import fixedBottomBtn from '@/components/fixed-bottom-btn.vue';
	export default {
		components: {
			fixedBottomBtn
		},
		data() {
			return {
				id: '',
				form: {
					"achievementsContent": "",
					"descriptionContent": "",
					"endDate": "",
					"note": "",
					"projectName": "",
					"projectRole": "",
					"startDate": "",
					"status": 0
				},
				rules: {
					projectName: [{
						required: true,
						message: 'Project name required',
						trigger: ['blur', 'change']
					}],
					projectRole: [{
						required: true,
						message: 'Role Played  required',
						trigger: ['blur', 'change']
					}],
					startDate: [{
						required: true,
						message: 'Start Time required',
						trigger: ['blur', 'change']
					}],
					endDate: [{
						required: true,
						message: 'End Time required',
						trigger: ['blur', 'change']
					}],
					descriptionContent: [{
						required: true,
						message: 'Project description required',
						trigger: ['blur', 'change']
					}],
					achievementsContent: [{
						required: true,
						message: 'Project performance required',
						trigger: ['blur', 'change']
					}],
				},
				datePickerShow: false,
				datePickerKey: ''
			}
		},
		methods: {
			chooseDate(k) {
				this.datePickerKey = k;
				this.datePickerShow = true;
			},
			onCloseDatePicker(e) {
				this.datePickerShow = false;
			},
			onCancelDatePicker() {
				this.datePickerShow = false;
			},
			onConfirmDatePicker(e) {
				let d = this.formatDatetime(e.value);
				this.form[this.datePickerKey] = d;
				this.datePickerShow = false
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					let data = JSON.parse(JSON.stringify(this.form));
					uni.showLoading({
						title: 'loading'
					});
					if (this.id) {
						project_sid_edit(this.id, data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					} else {
						data.candidateSid = this.sid;
						project(data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					}
				}).catch(errors => {
					try {
						uni.$u.toast(errors[0].message)
					} catch (e) {
						uni.$u.toast('please enter')
					}
				})
			},
			remove() {

			},
			getData() {
				if (!this.id) {
					return false;
				}
				uni.showLoading({
					title: 'loading'
				});
				project_sid(this.id).then(async (res) => {
					let data = res.data;
					for (let key in this.form) {
						this.form[key] = data[key]
					};
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			init() {

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			uni.$off('refresh_project');
			uni.$once('refresh_project', (v) => {
				this.getData();
			})
		},
		onLoad(d) {
			this.id = d.id || '';
			this.init();
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	.date-icon {
		width: 40upx;
		height: 40upx;
	}

	/deep/.g_textarea_min_height {
		.u-textarea__field {
			min-height: 190upx;
			font-size: 12px;
		}
	}
</style>